<template>
  <div class="banner">
    <!-- 工具栏 -->
    <div class="toolbar">
      <div class="left">
        <el-button type="primary" icon="el-icon-plus" @click="addBanner">添加</el-button>
      </div>
    </div>
    <!-- 表格区域 -->
    <div class="tablebox">
      <el-table border stripe :data="tableData" v-loading="loading">
        <el-table-column label="编号" prop="bannerId" width="80">
          <template slot-scope="scope">{{scope.$index+1}}</template>
        </el-table-column>
        <el-table-column label="图片预览" prop="imgUrl" width="220">
          <template slot-scope="scope">
            <img :src="scope.row.imgUrl" alt width="200" height="100" />
          </template>
        </el-table-column>
        <el-table-column label="图片名称" prop="imgName"></el-table-column>
        <el-table-column label="链接地址" prop="linkUrl"></el-table-column>
        <el-table-column label="状态" prop="status">
          <template slot-scope="scope">
            <el-tag size="medium" v-if="scope.row.status">正常</el-tag>
            <el-tag size="medium" v-else type="danger">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime">
          <template slot-scope="scope">{{ scope.row.createTime | timer }}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="editBanner(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteBanner(scope.row.bannerId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 编辑弹框 -->
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        :before-close="handleClose">
        <div class="eidtbox">
          <el-form :model="editObj" label-width="100px" :rules="rules" ref="editForm">
            <el-form-item label="轮播图名称:" prop="imgName">
              <el-input v-model="editObj.imgName"></el-input>
            </el-form-item>
            <el-form-item label="链接地址:" prop="linkUrl">
              <el-input v-model="editObj.linkUrl"></el-input>
            </el-form-item>
            <el-form-item label="状态:">
              <el-radio-group v-model="editObj.status">
                <el-radio :label="1">正常</el-radio>
                <el-radio :label="0">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-upload
                class="avatar-uploader"
                :action="actionUrl"
                :headers="headers"
                :show-file-list="false"
                name="banner"
                :before-upload="beforeUpload"
                :on-success="handleAvatarSuccess"
              >            
                  <img v-if="editObj.imgUrl" :src="editObj.imgUrl" class="avatar" />
                  <i class="el-icon-plus avatar-uploader-icon" v-else></i>
              </el-upload>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="sureEdit">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import {mapGetters} from "vuex"
import {getBanner,deleteBanner,editBanner} from "@/api"
export default {
  data() {
    return {
      dialogVisible:false,
      actionUrl:"http://192.168.1.9:3000/api/admin/upload/",
      headers: { Authorization: "" },
      loading: true,
      editDiaShow: false,
      editObj: {
        bannerId:1,
        imgName: "",
        linkUrl: "",
        status: 1,
        imgUrl: ""
      },
      tableData: [],
      rules: {
        imgName: [
          { required: true, message: "轮播图名称不能为空", trigger: "blur" }
        ],
        linkUrl: [
          { required: true, message: "链接地址不能为空", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.headers.Authorization = "Bearer " + this.getUserInfo.token;
    this.getBanner()
  },
  computed: {
    ...mapGetters("login",["getUserInfo"]),
  },
  methods: {
    uploadSuccess(res, file) {
      this.editObj.imgUrl = res.data.imgUrl;
    },
    beforeUpload(file) {
      const isJPG = file.type === "image/png"; //如果是jpeg格式，true，false
      const isLt2M = file.size / 1024 / 1024 < 2; //如果是小于2M  true，flase

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 png 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    getBanner(){
      getBanner().then(data =>{
        // console.log(data)
        if(data.code == 200 && data.msg == "成功"){
          this.tableData = data.data;
          this.loading = false;
        }
      })
    },
    addBanner(){
      this.$router.push({name:"addbanner"})
    },
    deleteBanner(id){
      // console.log(id)
      deleteBanner({bannerId:id}).then(res =>{
        // console.log(res)
        if(res.code == 200 && res.msg =="删除成功"){
          this.getBanner()
        }
      })
    },
    handleClose(done) {
      done()
    },
    editBanner(row){
      // console.log(row);
      this.editObj.bannerId = row.bannerId;
      this.editObj.imgName = row.imgName;
      this.editObj.linkUrl = row.linkUrl;
      this.editObj.status = row.status;
      this.editObj.imgUrl = row.imgUrl;
      this.dialogVisible = true;
    },
    sureEdit(){
      editBanner(this.editObj).then(res =>{
        // console.log(res)
        if(res.code == 200 && res.msg == "编辑成功"){
          this.dialogVisible = false;
          this.getBanner();
        }
      })
    },
     handleAvatarSuccess(res, file) {
      this.editObj.imgUrl = res.data.imgUrl;
    },
    beforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2; //如果是小于2M  true，flase
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    }
  }
};
</script>

<style lang="less" scoped>
.banner {
  width: 100%;
  min-height: calc(100vh - 98px);
  background: #fff;
  padding: 15px;
  .toolbar {
    margin-bottom: 20px;
    overflow: hidden;
    .left {
      float: left;
    }
  }
  .page {
    text-align: center;
    margin-top: 20px;
  }
  .eidtbox {
    width: 400px;
    margin: 0 auto;
  }
}

.avatar-uploader /deep/.el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>